<template>
  <div class="kt-table-com">
    <el-table
      v-bind="$attrs"
      stripe
      :border="true"
      :loading="tableLoading"
      :data="tableData"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-for="item in tableColumnsProps"
        :key="item.prop"
        v-bind="item"
      >
        <template #default="scope" v-if="$slots[item.prop]">
          <slot :name="item.prop" v-bind="scope"></slot>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-if="showPagination"
      :page-number="pageNumber"
      :page-size="pageSize"
      :total="total"
      @getList="handleGetList"
    />
  </div>
</template>

<script setup lang="ts">
import type { TableColumn } from "./types"
import { getTextWidth } from "@/utils/tools"
import Pagination from "./Pagination.vue"

const {
  tableData = [],
  tableLoading = false,
  tableColumns = [],
  showPagination = false,
  pageNumber = 1,
  pageSize = 20,
  total = 0
} = defineProps({
  tableData: {
    type: Array as () => any[],
    required: true
  },
  tableColumns: {
    type: Array as () => TableColumn[],
    required: true
  },
  tableLoading: {
    type: Boolean
  },
  showPagination: {
    type: Boolean,
    default: false
  },
  pageNumber: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 20
  },
  total: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(["selection-change", "getList"])

// 处理表格列宽(computed)
const tableColumnsProps = computed(() => {
  let tempCols: TableColumn[] = tableColumns.map((item) => {
    // 默认属性
    const defaultProps = {
      sortable: true,
      "show-overflow-tooltip": true
    }
    return {
      ...defaultProps,
      ...item
    }
  })
  if (tableData.length > 0) {
    // 处理表格列宽
    tempCols = handleTableWidth(tempCols, tableData)!
  }
  return tempCols
})

// 处理表格列宽(函数)
const handleTableWidth = (columns: TableColumn[], data: any[]) => {
  // let props = columns.map((item) => item.prop)
  // let width
  let tempCols = columns.filter((col) => col.prop !== "action")
  const tempActionCol = columns.find((col) => col.prop === "action")
  tempCols.forEach((col, index) => {
    const textList = [col.label || ""]
    if (col.prop) {
      for (let i = 0; i < data.length; i++) {
        const row = data[i]
        if (row[col.prop]) {
          textList.push(row[col.prop])
        }
      }
    }

    const textWidth = getTextWidth(textList)
    if (textWidth > 0 && index !== tempCols.length - 1 && !col.width) {
      col.width = textWidth
    }
  })
  tempCols = [...tempCols, tempActionCol!]
  return tempCols
}
const handleSelectionChange = (selection: any[]) => {
  const selectedRows = selection.map((item) => {
    const row: Record<string, any> = {}
    for (const key in item) {
      if (key !== "__el_table_row") {
        row[key] = item[key]
      }
    }
    return row
  })
  emit("selection-change", selectedRows)
}

const handleGetList = (pagination: {
  pageNumber: number
  pageSize: number
}) => {
  emit("getList", pagination)
}
</script>

<style lang="scss" scoped>
.kt-table-com {
  height: 100%;
  position: relative;
  :deep(.el-table) {
    position: absolute;
    height: 93% !important; // 重要
  }
  :deep(.el-pagination) {
    position: absolute;
    top: 94%;
    right: 0;
  }
}
</style>
